<template>
  <div class="main">
    <el-row :gutter="20" style="margin-bottom:60px">
    <el-col :span="6" ><el-card style="background-color:#409EFF"><div>一班人数</div><div style="padding: 10px 0; float:right; ">100</div></el-card></el-col>
    <el-col :span="6"><el-card style="background-color:#67C23A"><div>二班人数</div><div style="padding: 10px 0; float:right; ">100</div></el-card></el-col>
    <el-col :span="6"><el-card style="background-color:#E6A23C"><div>三班人数</div><div style="padding: 10px 0; float:right; ">100</div></el-card></el-col>
    <el-col :span="6"><el-card style="background-color:#F56C6C"><div>四班人数</div><div style="padding: 10px 0; float:right; ">100</div></el-card></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div style="height:55px"></div></el-col>
    </el-row>
    <el-row>
    <el-col :span="2">
    <div id="xx" style="width: 400px; height: 400px"></div>
    </el-col>
    <el-col :span="9">
    <div id="chart" style="width: 400px; height: 400px"></div>
    </el-col>
     <el-col :span="2">
    <div id="xx" style="width: 400px; height: 400px"></div>
    </el-col>
    <el-col :span="8">
    <div id="pie" style="width: 400px; height: 400px"></div>
    </el-col>
 </el-row>
  </div>
</template>
<script>
import request from "@/utils/request";
import { color } from "echarts";
export default {
  mounted() {
    this.loadingChart();
    this.pieChart();
  },
  methods: {
    loadingChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("chart"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "班级人数",
          subtext: "趋势图",
          left: "center",
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ["一班人数", "二班人数", "三班人数", "四班人数"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [],
            color: "#4caf50",
          },
          {
            type: "line",
            data: [],
            color: "#409EFF",
          },
        ],
      };

      request.get("/echart/members").then(res => {
        option.series[0].data = res.data;
        option.series[1].data = res.data;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
    pieChart() {
      let myChart = this.$echarts.init(document.getElementById("pie"));
      let option = {
        title: {
          text: "人数分布",
          subtext: "Class Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        
        series: [
          {
            type: "pie",
            radius: "70%",
            label:{
              narmal:{
                formatter:'{d}%'
              }
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            
          },
        ],
      };
      this.request.get("/echart/members").then(res => {
      option.series[0].data = [
          { name: "一班人数", value: res.data[0] },
          { name: "二班人数", value: res.data[1] },
          { name: "三班人数", value: res.data[2] },
          { name: "四班人数", value: res.data[3] },
        ];
        myChart.setOption(option);
      });
    },
  },
};
</script>
